<template>
  <div class="outer-container">
      <div v-if="submitSuccess" style="display: flex;flex-direction: column; height:100vh;align-items: center;justify-content: center;">
          <div>
              <svg t="1665131093907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10097" width="128" height="128"><path d="M0 512C0 229.248 229.248 0 512 0s512 229.248 512 512-229.248 512-512 512S0 794.752 0 512z" fill="#5A91F7" p-id="10098"></path><path d="M512 192c176.768 0 320 143.232 320 320S688.768 832 512 832 192 688.768 192 512s143.232-320 320-320z" fill="#FFFFFF" p-id="10099"></path><path d="M691.968 436.864a34.944 34.944 0 0 0-46.08-17.92c-2.944 1.28-5.632 2.944-8.192 4.992L488.576 546.56c-13.184 10.88-32.256 10.624-45.184-0.64l-53.632-46.464a42.2784 42.2784 0 0 0-63.872 10.24c-9.856 16.512-7.296 37.632 6.272 51.328l108.8 109.568a34.9952 34.9952 0 0 0 49.536 0.128l0.128-0.128 194.048-195.072c10.24-10.112 13.056-25.472 7.296-38.656" fill="#5A91F7" p-id="10100"></path></svg>
          </div>
          <p style="font-size: 20px;color: #999999;">已提交</p>
      </div>
      <a-form-model v-else :model="form"
                     :rules="rules"
                     ref="formModel"
                     v-bind="layout">
          <a-form-model-item label="内容类型" prop="contentType">
              <a-radio-group v-model="form.contentType">
                  <a-radio v-for="item in contentTypes" :value="item.key" :key="item.key">{{item.name}}</a-radio>
              </a-radio-group>
          </a-form-model-item>
          <template v-if="form.contentType == 1">
              <a-form-model-item label="内容主图" prop="mbLogoUrl">
                  <j-image-upload v-model="form.mbLogoUrl"></j-image-upload>
              </a-form-model-item>
          </template>
          <a-form-model-item label="内容标题" prop="contentTitle">
              <a-input v-model="form.contentTitle" placeholder="请输入内容标题"></a-input>
          </a-form-model-item>
          <a-form-model-item label="副标题">
              <a-input v-model="form.contentSubTitle" placeholder="请输入内容副标题"></a-input>
          </a-form-model-item>
          <a-form-model-item label="描述">
              <a-textarea v-model="form.contentIntroduce" placeholder="请输入内容标题"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="指导单位" prop="authorName">
              <a-textarea v-model="form.authorName" placeholder="请输入姓名"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="手机号" prop="authorId">
              <a-input v-model="form.authorId" placeholder="请输入手机号"></a-input>
          </a-form-model-item>
         
          <a-form-model-item label="内容" prop="content">
              <EditorM v-if="form.contentType === 1" v-model="form.content"></EditorM>
              <j-upload v-else-if="form.contentType == 2" :return-url="true" v-model="form.videoUrl"></j-upload>
              <j-upload v-else-if="form.contentType == 3" :return-url="true" v-model="form.voiceUrl"></j-upload>
              <h5-editor v-else-if="form.contentType == 4" v-model="form.htmlUrl"></h5-editor>
          </a-form-model-item>
          <a-form-model-item label=" " :colon="false">
              <a-button style="margin: 0 auto;display: block;" type="primary" :disabled="loading" :loading="loading" @click="submitContent">提交</a-button>
          </a-form-model-item>
      </a-form-model>
  </div>
</template>

<script>
  import {contentTypes} from '@/utils/xinkeUtil';
  import EditorM from '../../components/xinke/editor/EditorM'
  import H5Editor from '../../components/xinke/editor/H5Editor'
  import { postAction } from '../../api/manage'
  export default {
    name: 'ContentOuter',
    components: { EditorM,H5Editor},
    data(){
      return {
        loading:false,
        submitSuccess:false,
        contentTypes: contentTypes,
        rules: {
          contentType: [
            {required: true, message: '请选择类型', trigger: 'blur'},
          ],
          mbLogoUrl: [
            {required: true, message: '请选择内容主图', trigger: 'blur|change'},
          ],
          contentTitle: [
            {required: true, message: '请输入标题', trigger: 'blur'},
          ],
          authorId: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
          ],
          authorName: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
          ],content: [
            {required: true, message: '请输入内容', trigger: 'blur'},
          ],
        },
        form: {
          contentType: 1,
          isWatermark: 0
        },
        layout: {
          labelCol: {md: 7, lg: 6},
          wrapperCol: {md: 17, lg: 18},
        },
      }
    },
    methods:{
      submitContent(){
        this.$refs.formModel.validate(async validate=>{
          if(validate){
            this.loading = true;
            const {contentType} = this.form;
            if(contentType === 1){
              if(!this.form.content){
                this.$message.warning('请输入内容');
                return false;
              }
            }else if(contentType === 2){
              if(!this.form.vedioUrl){
                this.$message.warning('请上传视频文件');
                return false;
              }
            }else if(contentType === 3){
              if(!this.form.voiceUrl){
                this.$message.warning('请上传音频文件');
                return false;
              }
            }else if(contentType === 4){
              if(!this.form.htmlUrl){
                this.$message.warning('请输入html地址');
                return false;
              }
            }
            const res = await postAction('task/taskInfo/saveConContentBankOuter',this.form);
            if(res.success){
                this.submitSuccess = true;
            }else{
                this.$message.error(res.message);
            }
          }else{
            return false;
          }
        })
      }
    }
  }
</script>

<style scoped>
    @media screen and (max-width: 960px){
        .outer-container{
            padding: 15px;
        }
    }
</style>
